<template>
    <el-form ref="form" label-width="80px">
        <el-row>
            <el-col :span="6" style="min-width: 300px" v-if="showYear">
                <el-form-item label="年度">
                    <el-date-picker
                        v-model="searchForm.evalYear"
                        type="year"
                        format="yyyy"
                        value-format="yyyy"
                        placeholder="选择">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showArea">
                <el-form-item label-width="0px">
                    <el-form-item prop="province" label="国家">
                        <el-select v-model="searchForm.indexArea" :multiple="areaMuti" clearable filterable placeholder="请选择所属国家">
                            <el-option :label="area.areaName" :value="area.areaId" v-for="(area,idx) of areasList" :key="idx"></el-option>
                        </el-select>
<!--                        <el-cascader-->
<!--                            placeholder="搜索"-->
<!--                            :options="areasOptions"-->
<!--                            filterable></el-cascader>-->
                    </el-form-item>
                </el-form-item>
            </el-col>
            <el-col :span="6" v-if="showStatus">
                <el-form-item prop="status" label="状态">
                    <el-select v-model="searchForm.evalStatus"
                               placeholder="请选择">
                        <el-option v-for="status in statusList"
                                   :key="status.value"
                                   :label="status.label"
                                   :value="status.value"></el-option>
                    </el-select>


                </el-form-item>
            </el-col>
            <el-button type="primary" @click="search" style="margin-left: 20px;">查询</el-button>
            <el-button type="danger" @click="reset" style="margin-left: 20px;" v-if="showReset">重置</el-button>
        </el-row>
    </el-form>
</template>

<script>
import {statusList} from '@/utils/data'
export default {
	props: {
		showArea: {
			type: Boolean,
			default: true
		},
        showYear: {
            type: Boolean,
            default: true
        },
        showStatus: {
            type: Boolean,
            default: false
        },
        showReset: {
            type: Boolean,
            default: true
        },
        areaMuti: {
            type: Boolean,
            default: false
        },
        autoDefault: {
            type: Boolean,
            default: false
        }
	},
	data(){
		return {
            searchForm: {
                evalYear : "",
                indexArea: "",
                area: '',
                city: '',
                province: '',
                areaId: null,
                cityId: null,
                regionId:null,
                region:null,
                provinceId: null,
                evalStatus: null
            },
			yearsList : [],
            provinceList: [],
            cityList: [],
            areaList: [],
            areasOptions: [],
            statusList: statusList,
            areasList: []
		}
	},
	mounted () {
		this.init();
	},
	methods: {
		// 默认设置某些数据
		init () {
			this.yearsList = []
			for (let i = 2024; i < 2060; i++) {
				this.yearsList.push({
					value: i,
					label: i
				})
			}
            this.listAreaByParentId().then(({ data }) => {
                console.log("🚀 ~ data", data.length)
                // data.forEach((row) => {
                //     if(row.level === 1){
                //         this.areasOptions.push({
                //             value: row.areaId,
                //             label: row.areaName,
                //             children: []
                //         })
                //     }
                // })
                data.forEach((row) => {
                    if(row.level === 2){
                        // this.areasOptions.forEach((op) => {
                        //     if(row.parentId === op.value){
                        //         op.children.push({
                        //             value: row.areaId,
                        //             label: row.areaName,
                        //         })
                        //     }
                        // })
                        this.areasList.push(row)

                    }
                })

                if(this.autoDefault){
                    this.searchForm.evalYear = wfy.format('yyyy', new Date());
                    this.searchForm.indexArea = this.areasList[0].areaId;
                    this.searchForm.region = this.areasList[0].areaName;
                    this.search()
                }
                console.log("🚀 ~ this.areasList", this.areasList)

            })
		},
        listAreaByParentId (pid) {
            if (!pid) pid = 0
            return this.$http({
                url: this.$http.adornUrl(`/sys/area/nav`),
                method: 'get',
                params: this.$http.adornParams({})
            })
        },
        reset() {
          this.searchForm.cityId = null
          this.searchForm.city = null
          this.searchForm.province = null
          this.searchForm.provinceId = null
          this.searchForm.area = null
          this.searchForm.areaId = null
          this.searchForm.region = null
          this.searchForm.regionId = null
          this.searchForm.evalStatus = null
          this.evalYear = wfy.format('yyyy', new Date())

        },
        // 选择省
        selectProvince (val) {
            console.log('🚀 ~ val', val)

            let findProvince = this.provinceList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findProvince', findProvince)
            this.searchForm.province = findProvince.areaName;

            this.searchForm.cityId = null
            this.searchForm.city = ''

            this.searchForm.regionId = null
            this.searchForm.region = ''
            // 获取城市的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.cityList = data
            })
        },
        // 选择市
        selectCity (val) {
            let findCity = this.cityList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findCity', findCity)
            this.searchForm.city = findCity.areaName;

            this.searchForm.areaId = null
            this.searchForm.area = ''
            // 获取区的select
            this.listAreaByParentId(val).then(({ data }) => {
                this.areaList = data
            })
        },
        selectArea(val){
            let findArea = this.areaList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findArea', findArea)
            //this.searchForm.area = findArea.areaName;
            this.searchForm.region = findArea.areaName;
        },
		search(){
			// if(wfy.empty(this.searchForm.evalYear)){
			// 	this.$alert("请选择年度","友情提醒");
			// 	return;
			// }
			this.$emit("search",this.searchForm);
		},
		exportPdf(){
			this.$emit("export");
		}
	}
}
</script>

<style lang="scss" scoped>

</style>
